<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>当当图书榜</title>
		<style type="text/css">
			body {
				width: 1100px;
				margin: 0 auto;
			}

			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
				color: black;
			}

			li {
				list-style: none;
			}

			#top {
				margin: 4px;
				display: flex;
				justify-content: space-between;
			}

			#top #topnav {
				margin-top: 15px;
				display: flex;
				background-color: #EaffFa;

				height: 32px;
				line-height: 32px;

				border: 1px solid gainsboro;

				position: relative;
			}

			#top #topnav li {
				margin-right: 5px;
				margin-left: 5px;
			}

			#top #topnav li a {
				font-size: 12px;
			}

			.zhe {
				position: absolute;
				left: 0;
				top: -20px;
			}

			.zhe img {
				height: 60%;
				width: 80%;
			}

			#menu {
				background: url(image/menuBg.jpg);
				height: 36px;
				line-height: 36px;

			}

			#menu ul {
				display: flex;
				justify-content: space-around;
			}

			#menu ul li {
				width: 60px;

			}

			#menu ul li a {
				color: white;

			}

			#menu ul li a:hover {
				text-decoration: underline;
				text-decoration-color: blue;
			}

			#top3 {
				border: 3px solid greenyellow;
				position: relative;
			}

			#top3 #title {
				position: absolute;
				left: -13px;
			}
			#top3 #bang{
				margin-top: 55px;
			}
			#top3 #sale1 { 
				display: flex;
				width: 560px;
				overflow: hidden;
			}

			#top3 #sale1 .left {
				width: 260px;
				position: relative;
			}

			#top3 #sale1 .left img:nth-child(2) {
				position: absolute;
				left: 20px;
				top: 0px;
			}

			#top3 #sale1 .right {
				width: 300px;
				font-size: 12px;
				line-height: 24px;
			}

			#top3 #sale1 .right a {
				color: #87CEEB;
			}

			#top3 #sale1 .right strong {
				color: brown;
			}
			#top3 #bang{
				display: flex;
			}
			#top3 #sale23{
				width: 500px;
				/* overflow: hidden; */
				font-size: 12px;
				
			}
			#top3 #sale23 p{
				line-height: 25px;
			}
			#sale23 .sale2{
				display: flex;
			}
			
			#sale23 .sleft{
				width: 100px;
				position: relative;
			}
			#sale23 .sleft img:nth-child(2){ 
				position: absolute;
				left: 10px;
				top: -10px;
			}
			#sale23 .sright{
				width: 350px;
				
			}
			#sale23 .name{
				color: #87CEEB;;
			}
			#sale23 strong{
				color: brown;
			}
			#sale23 p span{
				margin-left: 25px;
				font-size: 9px;
				color: lightgreen;
			}
			footer{
				text-align: center;
				font-size: 13px;
				
			}
			footer img{
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="top">
			<div id="logo">
				<img src="image/logo.jpg">
			</div>
			<ul id="topnav">
				<li><a href="">尾品汇</a></li>
				<li><a href="">当当优品</a></li>
				<li><a href="">数字馆</a></li>
				<li><a href="">都看阅器</a></li>
				<li class="zhe"><img src="image/icon_count.png" /></li>
			</ul>
		</div>
		<div id="menu">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
				<li><a href="">首页</a></li>
			</ul>
		</div>
		<div>
			<img src="image/banner.png" width="1100px" />
		</div>
		<div id="top3">
			<div id="title"><img src="image/bg_bang.gif" /></div>
			<div id="bang"> 
				<div id="sale1">
					<div class="left">
						<img src="image/book-01.jpg" />
						<img src="image/bookNo1.gif" />
					</div>
					<div class="right">
						<p><a href="">偷影子的人</a></p>
						<p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
						<p>当当价：<strong>￥ 17.90</strong></p>
						<p>出版社：湖南文艺出版社</p>
						<p>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
							一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他</p>
					</div>
				</div>
				<div id="sale23">
					<div class="sale2">
						<div id="s2" class="sleft">
							<img src="image/book-02.jpg" />
							<img src="image/bookNo2.gif" />
						</div>
						<div id="s22" class="sright">
							<p class="name">看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </p>
							<p>作 者：柴静 著</p>
							<p>出版社：广西师范大学出版社</p>
							<p><strong>￥ 29.40</strong><span>7.4折</span></p>
						</div>
					</div>
					<div class="sale2">
						<div id="s3"  class="sleft">
							<img src="image/book-03.jpg" />
							<img src="image/bookNo3.gif" />
						</div>
						<div id="s32"  class="sright">
							<p  class="name">改变孩子先改变自己 </p>
							<p>作 者：贾容韬 贾毅 著</p>
							<p>出版社：作家出版社</p>
							<p><strong>￥ 22.20</strong><span>7.4折</span></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer>
			Copyright (C) 当当网 2004-2017, All Rights Reserved
			<img src="image/validate.gif"/>
			京ICP证041189号出版物经营许可证 新出发京批字第直0673号
		</footer>
	</body>
</html>
